<template>
  <div class="filter-sidebar">
    <div class="filter-header">
      <h3>Filters</h3>
      <el-button
        type="text"
        size="mini"
        icon="el-icon-refresh-right"
        @click="resetFilters"
      >
        Reset All
      </el-button>
    </div>

    <!-- Categories Filter -->
    <div class="filter-section">
      <div class="section-header">
        <h4>Categories</h4>
        <el-button
          type="text"
          size="mini"
          @click="toggleShowAllCategories"
          class="compact-button"
        >
          {{ showAllCategories ? 'Show Less' : 'Show All' }}
        </el-button>
      </div>
      <div class="filter-options categories">
        <el-checkbox-group v-model="selectedCategories" @change="emitFilterChange">
          <div v-for="(category, idx) in displayedCategories" :key="`cat-${idx}`" class="filter-item">
            <el-checkbox
              v-model="selectedCategories"
              :label="category.id">
              {{ category.name }} ({{ category.count }})
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <!-- Authors Filter -->
    <div class="filter-section">
      <div class="section-header">
        <h4>Authors</h4>
        <el-button
          type="text"
          size="mini"
          @click="toggleShowAllAuthors"
          class="compact-button"
        >
          {{ showAllAuthors ? 'Show Less' : 'Show All' }}
        </el-button>
      </div>
      <div class="filter-options">
        <el-checkbox-group v-model="selectedAuthors" @change="emitFilterChange">
          <div v-for="(author, idx) in displayedAuthors" :key="`auth-${idx}`" class="filter-item">
            <el-checkbox
              v-model="selectedAuthors"
              :label="author.id">
              {{ author.name }} ({{ author.count }})
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <!-- Status Filter -->
    <div class="filter-section">
      <h4>Status</h4>
      <div class="filter-options">
        <el-checkbox-group v-model="selectedStatuses" @change="emitFilterChange">
          <div v-for="(status, idx) in statuses" :key="`status-${idx}`" class="filter-item">
            <el-checkbox
              v-model="selectedStatuses"
              :label="status.id">
              {{ status.name }} ({{ status.count }})
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <!-- Date Range Filter -->
    <div class="filter-section">
      <h4>Publication Date</h4>
      <div class="filter-options">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          @change="emitFilterChange"
          :clearable="true"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 100%" />
      </div>
    </div>

    <!-- Apply Button for Mobile -->
    <div class="mobile-apply-button">
      <el-button type="primary" @click="$emit('close')">Apply Filters</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterSidebar',
  props: {
    categories: {
      type: Array,
      default: () => []
    },
    authors: {
      type: Array,
      default: () => []
    },
    statusCounts: {
      type: Object,
      default: () => ({
        available: 0,
        borrowed: 0,
        reserved: 0,
        maintenance: 0
      })
    }
  },
  data() {
    return {
      selectedCategories: [],
      selectedAuthors: [],
      selectedStatuses: [],
      dateRange: null,
      showAllCategories: false,
      showAllAuthors: false,
      visibleCategoriesCount: 5,
      visibleAuthorsCount: 5
    }
  },
  computed: {
    displayedCategories() {
      return this.showAllCategories
        ? this.categories
        : this.categories.slice(0, this.visibleCategoriesCount)
    },
    displayedAuthors() {
      return this.showAllAuthors
        ? this.authors
        : this.authors.slice(0, this.visibleAuthorsCount)
    },
    statuses() {
      return [
        { id: 'available', name: 'Available', count: this.statusCounts.available },
        { id: 'borrowed', name: 'Borrowed', count: this.statusCounts.borrowed },
        { id: 'reserved', name: 'Reserved', count: this.statusCounts.reserved },
        { id: 'maintenance', name: 'Maintenance', count: this.statusCounts.maintenance }
      ]
    },
    filters() {
      return {
        categories: this.selectedCategories,
        authors: this.selectedAuthors,
        statuses: this.selectedStatuses,
        dateRange: this.dateRange
      }
    }
  },
  methods: {
    toggleShowAllCategories() {
      this.showAllCategories = !this.showAllCategories
    },
    toggleShowAllAuthors() {
      this.showAllAuthors = !this.showAllAuthors
    },
    resetFilters() {
      this.selectedCategories = []
      this.selectedAuthors = []
      this.selectedStatuses = []
      this.dateRange = null
      this.emitFilterChange()
    },
    emitFilterChange() {
      this.$emit('filter-change', this.filters)
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-sidebar {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 15px;
  
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .filter-section {
    margin-bottom: 20px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      .compact-button {
        padding: 4px 6px;
        font-size: 12px;
      }
    }
    
    h4 {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 500;
      color: #303133;
    }
    
    .filter-options {
      max-height: 200px;
      overflow-y: auto;
      
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        
        .el-checkbox {
          margin-left: 0;
          margin-right: 0;
          padding: 4px 0;
          
          .count {
            color: #909399;
            font-size: 12px;
          }
        }
      }
      
      &.categories {
        .category-checkbox {
          margin-left: 0;
        }
      }
    }
  }
  
  .mobile-apply-button {
    display: none;
    
    .el-button {
      padding: 8px 15px;
      font-size: 13px;
    }
  }
}

@media screen and (max-width: 768px) {
  .filter-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .filter-section {
      flex: 1;
      overflow-y: auto;
    }
    
    .mobile-apply-button {
      display: block;
      margin-top: 12px;
      
      .el-button {
        width: 100%;
      }
    }
  }
}
</style> 